<template>
    <div>
        <button v-on:click="show=! show">
            show/hide text
        </button>
        <transition name="fade">
            <p v-if="show">hello world</p>
        </transition>
    </div>
</template>


<script>
    export default{
        name: 'demo',
        data(){
            return {
                show: true
            }
        }
    }
</script>


<style scoped>
    /*
    scoped作用域，只允许本文件，不加是全局的
     */
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-active {
        opacity: 0;
    }

</style>